<template>
  <div class="home-employ-wrap">
    <div class="home-employ-con">
      <div class="home-employ-tit">
        <p class="home-tit-top">学员就业喜报</p>
        <p class="home-tit-con">就业率100%，学业事业双丰收</p>
      </div>
    </div>
    <div class="home-banner-wrap">
      <div class="home-banner">
        <img src="@/assets/image/xx.jpg" alt="" />
        <div class="home-banner-con">
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="item in listData" :key="item.id">
              <img :src="'https://itdahua.com'+item.work_image" alt="">
              <p>{{item.name}} | {{item.work_title}}</p>
              <p>{{item.work_company}}</p>
              <p>{{item.work_salary}}/月</p>
            </swiper-slide>  
           <div class="swiper-scrollbar"></div>
          </swiper>
          <div class="swiper-button-next btn-next" ></div>
            <div class="swiper-button-prev btn-next"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWork } from "../../http/api";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import  { Grid ,Navigation,Scrollbar} from 'swiper';

// import style (>= Swiper 6.x)
import "swiper/swiper-bundle.css";
export default {
  data() {
    return {
        listData:[],
      swiperOptions: {
         navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        slidesPerView: 5,
        mousewheel: true,
        keyboard: true,
        modules: [Grid,Navigation,Scrollbar],
        grid: {
          rows: 2,
          fill: 'row',
        },
        spaceBetween: 20,
        scrollbar: {
          el:".swiper-scrollbar",
        },
        // Some Swiper option/callback...
      },
    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  async mounted() {
    this.swiper.slideTo(3, 1000, false);
    let res = await getWork();
    console.log(res);
    this.listData=res
  },
};
</script>

<style scoped lang="scss">
.home-employ-wrap {
  width: 100%;
  overflow: hidden;
  .home-employ-tit {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding-top: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}
.home-tit-top {
  font-size: 34px;
  color: #333;
}
.home-tit-con {
  padding-top: 18px;
  font-size: 18px;
  color: #999;
  padding-bottom: 52px;
}
.home-banner-wrap {
  width: 100%;
  min-width: 1200px;
  overflow: hidden;
  height: 590px;
  margin: 0 auto;
  position: relative;
}
.home-banner {
  width: 1920px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -960px;
  }
.home-banner-con {
  position: absolute;
  top: 190px;
  width: 1200px;
  left: 50%;
  margin-left: -600px;
}
.swiper-container {
  width: 794px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding-bottom: 147px;
  z-index: 1;
}
.swiper-slide{
    width: 159px;
     height: calc((100% - 30px) / 2);
    margin-top: 0!important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    img{
          width: 132px;
          height: 90px;
    }
    p{
      font-size: 12px;
    color: #ffff9a;
    margin-top: 5px;
    }
}
.btn-next{
      width: 64px;
    height: 64px;
    border-radius: 100%;
    background-color: #830200;
    color: #fff;
    top: 112px;
}
.swiper-scrollbar{
  position: absolute;
    left: 5%;
    bottom: -52px;
    z-index: 50;
    height: 5px;
    width: 78%;
}
.home-banner-con ::v-deep .swiper-scrollbar-drag{
     width: 60px !important
}

</style>